import { message } from 'antd';
import NP from 'number-precision';
import { useEffect, useRef, useState } from 'react';
import './index.less';

import progressBanner1 from '@/assets/image/progressBanner1.gif';
import progressBanner2 from '@/assets/image/progressBanner2.gif';
import progressBanner3 from '@/assets/image/progressBanner3.gif';
import Step from './Step';

const Progress: React.FC<any> = (props) => {
  const [progressList, setProgressList] = useState([
    {
      percent: 0, //当前进度条的数值 控制进度的宽度
      remainingPercent: 100, //剩余未完成的进度条的数值
      remainingTime: 5000, //剩余未完成的进度条的时间
      intervalTime: 100, // 定时器间隔，以毫秒为单位
      run: false, //是否运行
      select: 9, //步骤三要滚动的文章篇数
      expected: 27, //步骤一和二 要滚动的文章篇数
      topTip: ['批量生成', '小麦正在努力生成文章', '批量生成完成'], //第一个提示语
      bottomTip: ['已生成', '篇'], //第二个提示语
      showLin: true, //是否显示进度条
    },
    {
      percent: 0, //当前进度条的数值 控制进度的宽度
      remainingPercent: 100, //剩余未完成的进度条的数值
      remainingTime: 5000, //剩余未完成的进度条的时间
      intervalTime: 100, // 定时器间隔，以毫秒为单位
      run: false, //是否运行
      select: 9, //步骤三要滚动的文章篇数
      expected: 27, //步骤一和二 要滚动的文章篇数
      topTip: ['文章打分', '小麦正在努力打分', '打分完成'], //第一个提示语
      bottomTip: ['已为', '篇文章打分'], //第二个提示语
      showLin: true, //是否显示进度条
    },
    {
      percent: 0, //当前进度条的数值 控制进度的宽度
      remainingPercent: 100, //剩余未完成的进度条的数值
      remainingTime: 5000, //剩余未完成的进度条的时间
      intervalTime: 100, // 定时器间隔，以毫秒为单位
      run: false, //是否运行
      select: 9, //步骤三要滚动的文章篇数
      expected: 27, //步骤一和二 要滚动的文章篇数
      topTip: ['文章筛选', '小麦正在努力筛选', '筛选完成'], //第一个提示语
      bottomTip: ['已为您筛选出', '篇优质文章'], //第二个提示语
      showLin: false, //是否显示进度条
    },
  ]);
  const stepIndex = useRef<number>(0); //当前在运行那个进度条
  const stepRun = useRef<boolean>(false); //进度条是否在运行
  const [totalTime, setTotalTime] = useState<number>(0); //进度条的总时间
  const reserveEndTime = useRef<number>(1500); //预留给进度条的结束时间
  const timeScale = useRef<any>([45, 45, 10]); //分配时间的比例
  //停止或启动进度条
  const stopStep = () => {
    setProgressList((prev) => {
      const updatedList = prev.map((item, i) => {
        if (i === stepIndex.current) {
          let newRun = !item.run;
          stepRun.current = newRun;
          return {
            ...item,
            run: newRun,
          };
        }
        return item;
      });
      return updatedList;
    });
  };
  // // 增加时间
  // const handleAddTime = (allTime = 10000)=>{
  //   //计算progressList里的remainingPercent总和 然后按照比例给每个进度条增加时间
  //   let totalRemainingPercent = 0 //总的剩余进度条值
  //   progressList.forEach((item:any)=>{
  //     totalRemainingPercent+=item.remainingPercent
  //   })
  //   setProgressList((prev) => {
  //     const updatedList = prev.map((item) => {
  //       let bili = (item.remainingPercent/totalRemainingPercent).toFixed(2) //平均数
  //       let addTime = NP.times(allTime,bili).toFixed(0) //增加的时间
  //       let newTime = NP.plus(item.remainingTime, addTime)
  //         return {
  //           ...item,
  //           remainingTime: newTime
  //         };
  //       return item;
  //     });
  //     return updatedList;
  //   });
  // }
  // // 减少时间
  // const handleDelTime = (allTime = 10000)=>{
  //   //计算progressList里的remainingPercent总和 然后按照比例给每个进度条减少时间
  //   let totalRemainingPercent = 0 //总的剩余进度条值
  //   progressList.forEach((item:any)=>{
  //     totalRemainingPercent+=item.remainingPercent
  //   })
  //   setProgressList((prev) => {
  //     const updatedList = prev.map((item) => {
  //       let bili = (item.remainingPercent/totalRemainingPercent).toFixed(2) //平均数
  //       let delTime = NP.times(allTime,bili).toFixed(0)
  //       let newTime = NP.minus(item.remainingTime, delTime)
  //         return {
  //           ...item,
  //           remainingTime:newTime<=0?0:newTime,
  //         };
  //       return item;
  //     });
  //     return updatedList;
  //   });
  // }
  //设置时间
  const handleSetTime = (timeTotal = 1000) => {
    //计算progressList里的remainingPercent总和 然后按照比例给每个进度条减少时间
    let totalRemainingPercent = 0; //总的剩余进度条值
    progressList.forEach((item: any) => {
      totalRemainingPercent += item.remainingPercent;
    });
    let rtime = timeTotal ? timeTotal : reserveEndTime.current;
    setProgressList((prev: any) => {
      const updatedList = prev.map((item: any) => {
        let bili = (item.remainingPercent / totalRemainingPercent).toFixed(2); //平均数
        let newTime = NP.times(rtime, bili).toFixed(0);
        return {
          ...item,
          remainingTime: newTime,
        };
        return item;
      });
      return updatedList;
    });
  };
  useEffect(() => {
    //启动进度条 在轮询请求状态第一个不是SUCCEED 才启动
    if (
      props.progressInfo &&
      props.pollingReqState.length === 1 &&
      props.pollingReqState[0] !== 'SUCCEED' &&
      stepRun.current === false
    ) {
      let { articles_expected, articles_selected, estimated_time = 10000 } = props.progressInfo;
      setProgressList((prev: any) => {
        const updatedList = prev.map((item: any, index: number) => {
          let isRun = index === 0 ? true : false; //启动第一个
          //按照比例分配时间
          let currentTime = (timeScale.current[index] * estimated_time * 10).toFixed(0);
          return {
            ...item,
            run: isRun,
            remainingTime: currentTime,
            select: articles_selected || 0, //步骤三要滚动的文章篇数
            expected: articles_expected || 0, //步骤一和二 要滚动的文章篇数
          };
          return item;
        });
        return updatedList;
      });
      stepRun.current = true;
    }
  }, [props.progressInfo, props.pollingReqState]);
  //监听轮询状态数组 改变进度条的总剩余时间
  useEffect(() => {
    // console.log("pollingReqState",props.pollingReqState);
    //计算请求返回的 当前文章生成的进度 =  生成 / 预期
    // let rate = ((props.progressInfo.articles_generated / props.progressInfo.articles_expected) * 100).toFixed(2) || 0;
    // //计算进度条的进度
    // let progressAll = 0;
    // progressList.forEach(item=>{
    //   progressAll+=item.percent
    // })
    // let progressRate = (progressAll / progressList.length).toFixed(2) || 0;
    // console.log(`进度条的总时间：${totalTime} ，生成的文章:${props.progressInfo.articles_generated} ,预计的文章:${props.progressInfo.articles_expected} ,请求进度：${rate} ,进度条进度：${progressRate}`);

    //只在轮询状态列表存在并且第一个不是成功的情况下触发
    if (props.pollingReqState && props.pollingReqState[0] !== 'SUCCEED') {
      //如果状态有成功 表示请求已经结束了 SUCCEED优先比请求返回的进度高 有可能 生成 / 预期 不一致的情况下返回SUCCEED
      if (props.pollingReqState.includes('SUCCEED')) {
        //将进度条的剩余时间设置为reserveEndTime 预留给结束的时间
        handleSetTime();
        setTimeout(() => {
          props.setShowProgress(false); //在预留的结束时间后 关闭进度条
        }, reserveEndTime.current + 200);
      } else if (
        props.pollingReqState.includes('FAILED') ||
        props.pollingReqState.includes('DELETED')
      ) {
        message.open({
          type: 'error',
          content: '文章生成失败，请重新生成!',
        });
        stopStep();
      } else if (props.pollingReqState.includes('CANCELED')) {
        message.open({
          type: 'error',
          content: '已取消文章生成!',
        });
        stopStep();
      } else {
        //如果请求状态列表里新增了一个状态 但是进度条总时间小于10秒 要加10秒给进度条 因为下一次轮询是10秒之后 才知道下一个状态是继续还是结束
        if (totalTime < 5000 && totalTime > 0) {
          let newToatlTime = Number(totalTime + 5000);
          handleSetTime(Number(newToatlTime));
        }
      }
    }
  }, [props.pollingReqState]);

  //进度条到达100 启动下一个
  useEffect(() => {
    let totalTime = 0;
    progressList.forEach((item) => {
      totalTime = Number(totalTime) + Number(item.remainingTime);
    });
    setTotalTime(Number(totalTime));

    //启动下一个的条件 正在运行 && 当前进度条的进度=100
    if (
      stepIndex.current < 2 &&
      stepRun.current &&
      progressList[stepIndex.current].percent === 100
    ) {
      stopStep(stepIndex.current + 1);
      stepIndex.current = stepIndex.current + 1;
    }
  }, [progressList]);

  return (
    <div className="progressWrap">
      {/* <div className='testBox'>
      <div className='time'>总时间：{(totalTime/1000).toFixed(2)} 秒</div>
      { progressList.map((item,index) => {
          return (<p key={index}>进度条{index+1}的时间 = {(item.remainingTime/1000).toFixed(2)}</p>)
        })
      }
    <Button  type='primary' onClick={()=>handleAddTime(10000)}>增加时间</Button>
    <Button  onClick={()=>handleDelTime(10000)}>减少时间</Button>
    <Button  onClick={()=>handleSetTime()}>剩余时间为{reserveEndTime.current/1000}秒</Button>
    <Button  danger={stepRun.current}  type='primary' onClick={()=>stopStep()}>
      {!stepRun.current?'开始':"暂停"}
    </Button>
    </div> */}

      <div className="stepWrap">
        {progressList.length > 0 &&
          progressList.map((item, index) => {
            return (
              <Step
                key={index}
                data={item}
                setProgressList={setProgressList}
                stopStep={stopStep}
                index={index}
              ></Step>
            );
          })}
      </div>
      <div className="stepBannerBox">
        {stepIndex.current === 0 ? (
          <img src={progressBanner1} alt="" />
        ) : stepIndex.current === 1 ? (
          <img src={progressBanner2} alt="" />
        ) : (
          <img src={progressBanner3} alt="" />
        )}
      </div>
    </div>
  );
};

export default Progress;
